<template>
  <div id='doctorsched'>
    <el-tabs v-model="activeName" style="margin-left:10px">
      <el-tab-pane label="排班列表" name="list" id='t1'>

       医生姓名： <el-input size='small' v-model="form.name" placeholder="请输入医生姓名"/> &nbsp;&nbsp;
        就诊科室：   <el-select size='small'  v-model="form.ks" placeholder="请选择科室">
                      <el-option
                        v-for="item in deplist"
                        :key="item.did"
                        :label="item.departmentName"
                        :value="item.did">
                      </el-option>
                    </el-select>&nbsp; &nbsp;
        值班日期：<el-input size='small'  v-model="form.date"  type='date'></el-input>&nbsp; &nbsp;
       <el-button size='small' @click='selectpaiban'  type="primary">查询</el-button>
       <el-button size='small' @click='restl'  type="">重置</el-button>
        <el-table v-loading="loadingShow"

	element-loading-text="数据正在加载中..."  :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" height="433" style="width: 100%;margin-top:20px">
          <el-table-column prop="date" label="排班日期" />
          <el-table-column label="星期">
            <template slot-scope="sc">
              <b v-if="sc.row.week == 0">星期日</b>
              <b v-if="sc.row.week == 1">星期一</b>
              <b v-if="sc.row.week == 2">星期二</b>
              <b v-if="sc.row.week == 3">星期三</b>
              <b v-if="sc.row.week == 4">星期四</b>
              <b v-if="sc.row.week == 5">星期五</b>
              <b v-if="sc.row.week == 6">星期六</b>
            </template>
          </el-table-column>
          <el-table-column label="时段">
            <template slot-scope="sc">
              <b v-if="sc.row.subsectionType == 1">上午-8:00~12:00</b>
              <b v-if="sc.row.subsectionType == 2">下午-13:00~17:00</b>
              <b v-if="sc.row.subsectionType == 3">晚上-18:00~8:00</b>
            </template>
          </el-table-column>
          <el-table-column prop="hospitalName" label="医院名称" />
          <el-table-column prop="departmentName" label="科室" />
          <el-table-column prop="trueName" label="医生" />
        </el-table>
       <div class="block" style="margin-top:20px">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            :total="tableData.length"
          >
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="添加排班" name="second" id='t2'>
        <el-row>
          <el-col :span="5" :offset="19"
            >本次排班从{{ nextweek }}开始(下周一)</el-col
          >
        </el-row>
        <el-table :data="departmentList"  :header-cell-style="{
                backgroundColor: '#eef5ff',
                textAlign: 'center',
              }"
              height='490'
              :cell-style="{ textAlign: 'center' }">
          <el-table-column prop='dname' label="科室名称\时段"></el-table-column>
          <el-table-column :label="getdate(0)+'(一)'">
            <template slot-scope="sc">
                 <el-cascader
                    :props="{ expandTrigger: 'hover' }"
                    :options="sc.row.selectListList"
                    @change="handleChange($event,sc.row.did,1,getdate(0))"></el-cascader>
            </template>
          </el-table-column>
          <el-table-column :label="getdate(1)+'(二)'">
              <template slot-scope="sc">
                 <el-cascader
                 :props="{ expandTrigger: 'hover' }"
                    :options="sc.row.selectListList"
                    @change="handleChange($event,sc.row.did,2,getdate(1))"></el-cascader>
            </template>
          </el-table-column>
          <el-table-column :label="getdate(2)+'(三)'">
            <template slot-scope="sc">
                 <el-cascader
                 :props="{ expandTrigger: 'hover' }"
                    :options="sc.row.selectListList"
                    @change="handleChange($event,sc.row.did,3,getdate(2))"></el-cascader>
            </template>
          </el-table-column>
          <el-table-column :label="getdate(3)+'(四)'">
            <template slot-scope="sc">
                 <el-cascader
                 :props="{ expandTrigger: 'hover' }"
                    :options="sc.row.selectListList"
                    @change="handleChange($event,sc.row.did,4,getdate(3))"></el-cascader>
            </template>
          </el-table-column>
          <el-table-column :label="getdate(4)+'(五)'">
            <template slot-scope="sc">
                 <el-cascader
                 :props="{ expandTrigger: 'hover' }"
                    :options="sc.row.selectListList"
                    @change="handleChange($event,sc.row.did,5,getdate(4))"></el-cascader>
            </template>
          </el-table-column>
          <el-table-column :label="getdate(5)+'(六)'">
            <template slot-scope="sc">
                 <el-cascader
                 :props="{ expandTrigger: 'hover' }"
                    :options="sc.row.selectListList"
                    @change="handleChange($event,sc.row.did,6,getdate(5))"></el-cascader>
            </template>
          </el-table-column>
          <el-table-column :label="getdate(6)+'(日)'">
            <template slot-scope="sc">
                 <el-cascader
                 :props="{ expandTrigger: 'hover' }"
                    :options="sc.row.selectListList"
                    @change="handleChange($event,sc.row.did,0,getdate(6))"></el-cascader>
            </template>
          </el-table-column>
        </el-table>


        <el-row>
          <el-col :span="6">
            <el-button @click='addSched()' type="primary">添加</el-button>
            <el-button type="">重置</el-button>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { loading,Sloading} from "../../api/doctor/tools/loading";
import {
  getAllScheduling,
 getAllDoctorAndDep,
 getAllDep,
 Scheduling
} from "../../api/doctor/doctorscheduling";
import { open2, open3, open4 } from "../../api/doctor/tools/alert";
export default {
  name: "Doctorscheduling",
  data() {
    return {
      loadingShow:true,
      form:{
        name:"",
        ks:"",
        date:""
      },
      deplist:[],
      activeName: "list",
      //医生排版列表
      tableData: [],
      //时间显示
      nextweek: "",
      //分页=当前页
      currentPage: 1,
      pageSize: 8,
      //科室和医生列表
      departmentList:[],
      //数据存储
      datalist:[]
    };
  },
  methods: {
    handleChange(row,did,e,date) {
      for(let obj of this.datalist){
        if(obj.did==did){
          //科室相同
          if(obj.e==e){
              obj.depDoc=row
              return;
          }
        }
      }
       let dep = {
         e:e,
         date:date,
         did:did,
         depDoc:row
      }
      this.datalist.push(dep)
    },

    //排班
    addSched() {
        let str = JSON.stringify(this.datalist)
        let formdata = new FormData();
        formdata.append('datastr',str)
        Scheduling(formdata).then(re=>{
            if(re.code==200){
                open2(this,'添加成功')
            }else{
                open4(this,'添加失败')
            }
        })

    },
    //工具
    getdate(e){
      let dateTime = new Date(this.nextweek)
      dateTime=dateTime.setDate(dateTime.getDate()+e);
      dateTime=new Date(dateTime).toLocaleDateString();
      return dateTime;
    },


    //分页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage=val
    },
    //模糊查询
    selectpaiban(){
        getAllScheduling({name:this.form.name,ks:this.form.ks,date:this.form.date}).then((re) => {
          this.tableData = re.data;
        });
    },
    restl(){
      this.form.name=''
      this.form.ks=''
      this.form.date=''
        getAllScheduling({name:'',ks:'',date:''}).then((re) => {
          this.tableData = re.data;
        });
    }


  },
  mounted() {
    //科室和医生
    getAllDoctorAndDep().then(re=>{
      this.departmentList = re.data
    })
    //获取排版列表
    getAllScheduling({name:'',ks:'',date:''}).then((re) => { 
      this.tableData = re.data;
    });
    //获取所有科室
    getAllDep().then(re=>{
      this.deplist=re.data
    })

    // 获取下周一日期
    var date = new Date();
    date.setDate(date.getDate() + (8 - date.getDay()));
    var y = date.getFullYear();
    var m = date.getMonth() + 1;
    var d = date.getDate();
    var mvar = "",
      dvar = "";
    m < 10 ? (mvar = "0" + m) : (mvar = m);
    d < 10 ? (dvar = "0" + d) : (dvar = d);
    this.nextweek = y + "-" + mvar + "-" + dvar;
     setTimeout(()=>{
         this.loadingShow=false
     },500)
  },
  watch:{


  }
};
</script>

<style scoped>
*{
  font-weight: bold;
}
.el-input{
  width:200px
}
.el-select{
width:200px
}
.cl {
  margin-top: 20px;
}
.cll{
  font-size: 20px;
}
#doctorsched{
box-shadow:  0px 0px 15px #98d3e7;
}
</style>

